<template>
  <div class="custom-wrap" id="customForm">
    <div class="header" style="height: 100px; position:relative; background:#E2E6ED">
        <div style="color: #000;font-size: 28px;margin-bottom:15px;">广东省税务局机关公有住房申请表</div>
        <div style="position:absolute;right: 20px;bottom: 5px;">
            <span>申请人： {{detailObj && detailObj.applyRealname || userInfo.realname}}</span><span style="margin-left: 25px">申请时间：{{detailObj && detailObj.applyDate || date}}</span>
        </div>
        <!-- <el-button type="text" icon="el-icon-printer" class="new-print-btn noprint" v-print="printObj"></el-button> -->
         <el-button type="text" icon="el-icon-printer" class="new-print-btn noprint" v-print="printObj">打印</el-button>
    </div>
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules2" label-width="120px">
        <div class="disable-block" v-if="detailObj && detailObj.status"></div>
        <el-row type="flex" align="center">
            <el-col :span="2">
                <!-- <div style="height: 100%;display:flex;
                align-items:center;text-align:center;font-size: 16px;">居住人基本情况 -->
                <div style="height: 100%;padding-top: 250px;font-size: 16px;text-align: center;">居住人基本情况<span style="color: red;">（带红色星号的为必填项）</span></div>
            </el-col>
            <el-col class="no-border" :span="22">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="人员类别" prop="residentType">
                            <el-select v-model="ruleForm.residentType"
                                    placeholder="请选择人员类别"
                                    clearable>
                                <el-option v-for="item in optionRylb"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <!-- <el-col :span="12">
                        <el-form-item label="居住期限" prop="expireDate">
                            <el-date-picker
                                    v-model="ruleForm.expireDate"
                                type="date"
                                placeholder="请选择居住期限"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="是否广州市五区" prop="fiveArea">
                            <el-radio-group v-model="ruleForm.fiveArea" style="margin-left: 20px">
                              <el-radio :label="'1'">是</el-radio>
                              <el-radio :label="'0'">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="居住人姓名"  prop="residentRealname" class="xm-form-item">
                            <!-- <el-radio-group v-model="ruleForm.sysType" style="margin-left: 10px" @change="changesysType">
                              <el-radio :label="'1'">系统内</el-radio>
                              <el-radio :label="'2'">系统外</el-radio>
                            </el-radio-group>
                            <el-input  :placeholder="ruleForm.sysType == '1' ? '请选择系统内用户': '请输入系统外用户'"  @focus="choseMember" style="width:290px;" v-model="ruleForm.residentRealname">
                                <el-button v-if="ruleForm.sysType == '1'" slot="append" @click="choseMember">选择</el-button>
                            </el-input> -->
                             <el-input  :placeholder="'请选择或输入用户'"  style="width:450px;" @input="clearName" v-model="ruleForm.residentRealname">
                                <el-button slot="append" @click="choseMember">选择</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="residentSex" label-width="70px" class="xb-form-item">
                            <el-radio-group v-model="ruleForm.residentSex"  style="margin-left: 20px">
                              <el-radio :label="'1'">男</el-radio>
                              <el-radio :label="'2'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="职务/职级" prop="residentPost">
                            <el-select v-model="ruleForm.residentPost"
                            @change="changePost"
                            style="width:749px"
                                     
                                    placeholder="请选择职务/职级"
                                    clearable>
                                <el-option v-for="item in optionsZw"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                             <!-- <el-button type="primary" @click="showHouse" style="float: right;margin-right: 5px;font-size:13px">查看可用住房</el-button> -->
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="级别" prop="residentPostRank" class="jb-form-item">
                            <el-select v-model="ruleForm.residentPostRank"
                                    style="width:190px"
                                   
                                    placeholder="请选择级别"
                                    clearable>
                                <el-option v-for="item in optionsJb"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button type="primary" @click="showHouse" style="float: right;margin-right: 5px;font-size:13px">查看可用住房</el-button>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="residentCard">
                            <el-input v-model="ruleForm.residentCard"  :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作部门" prop="residentDeptName">
                            <el-input v-model="ruleForm.residentDeptName"  :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="婚姻状况" prop="marriage">
                            <el-select v-model="ruleForm.marriage"
                                    placeholder="请选择婚姻状况"
                                    @change="changeMar"
                                    clearable>
                                <el-option v-for="item in optionsHyzk"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="residentPhone">
                            <el-input v-model="ruleForm.residentPhone" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="配偶姓名" prop="spouseName">
                            <el-input v-model="ruleForm.spouseName" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="配偶身份证号" prop="spouseCard">
                            <el-input v-model="ruleForm.spouseCard" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row>
                    <el-col :span="24">
                        <el-form-item label="居住期限" prop="expireDate">
                            <el-date-picker
                                    v-model="ruleForm.expireDate"
                                type="date"
                                placeholder="请选择居住期限"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="reason">
                            <label for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">申请原因</label>
                            <el-input type="textarea" style="height: 100px" :row="4" v-model="ruleForm.reason" :maxlength="200"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <label for="reason" slot="label" style="display: inline-block;height: 151px;line-height:151px;">附件</label>
                            <el-upload
                                :headers="headers"
                                action="/act/file/upload"
                                :class="detailObj && detailObj.status ? 'upload-demo upload-detail' : 'upload-demo'"
                                :on-success="handleSuccess"
                                :on-preview="download"
                                :on-remove="handleRemove"
                                multiple
                                :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <label slot="label" style="display: inline-block;height: 125px;line-height:125px;">申请材料</label>
                            <div style="line-height: 1.5;padding-left: 10px;height: 125px;padding-top: 10px;">
                              （一）在职干部、职工：1、本人及家庭成员在广州市的无房产证明；2、个人住房承诺书（<a :href="hrefUrl" class="url-block1">查看模板</a>）</br>
                              <!-- （二）挂职/借调人员：1、本人及家庭成员未在广州市五区内持有产权住房、小产权房、购买或享受过福利性住房和租借保障性住房说明；2、人事处发出的挂职/借调文件。</br> -->
                              （二）挂职/借调人员：1、个人住房承诺书（<a :href="hrefUrl2" class="url-block1">查看模板</a>）；2、人事处发出的挂职/借调文件。</br>
                              （三）编外人员：1、本人及家庭成员在广州市的无房产证明；2、个人住房承诺书（<a :href="hrefUrl1" class="url-block1">查看模板</a>）；3、劳动合同。
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">部门领导意见</label>
                <div class="flex-block">{{bmldsp}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;line-height:100px;">人事处审批</label>
                <div class="flex-block">{{rscsp}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center">
            <el-col :span="2">
                <div style="height: 100%;display:flex;
                align-items:center;text-align:center;font-size: 16px;">服务中心填写</div>
            </el-col>
            <el-col class="no-border" :span="22">
               <el-row>
                    <!-- <el-col :span="3">
                      <div style="height: 100%;display:flex;align-items:center;text-align:center;font-size: 16px;">拟安排房屋情况</div>
                    </el-col> -->
                    <el-form-item label-width="121px">
                      <label slot="label" style="width: 100%;display: inline-block;height: 154px;line-height:154px;border-left: 1px solid #000;border-top: 1px solid #000;">拟安排房屋情况</label>
                      <el-col :span="24">
                        <el-row>
                          <el-col :span="24">
                            <el-form-item label="地址">
                                <el-input disabled :style="{width: form1 && form1.housingType == '2' ? '420px': '100%'}" v-model="form1 && form1.address">
                                  <el-button style="color: #fff;background:#409EFF;border-color: #409EFF;" slot="append" @click="choseHouse">选择公有住房</el-button>
                              </el-input>
                              <el-select v-model="form1 && form1.bedNumber"
                                        v-if="form1 && form1.housingType == '2'"
                                        @change="changeBed"
                                        :disabled="!bjFlag"
                                        style="width: 190px;margin-left: 10px;"
                                        placeholder="请选择床位"
                                        clearable>
                                    <el-option v-for="item in optionsBed"
                                            :key="item.bedId"
                                            :label="item.bedNumber"
                                            :value="item.bedId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="建筑面积（m²）">
                              <span>{{form1 && form1.constructionArea}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12" class="borderLeft">
                            <el-form-item label="公有住房类型">
                                <el-select v-model="form1 && form1.housingType"
                                        placeholder="请选择公有住房类型"
                                        disabled
                                        clearable>
                                    <el-option v-for="item in optionsHouseType"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="计租面积（m²）">
                                <span>{{form1 && form1.rentArea}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="租金（元）"  class="borderLeft">
                              <span>{{form1 && form1.defaultRent}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="120px">
                          <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;">机关服务中心资产组意见</label>
                          <div class="flex-block">{{zczyj}}</div>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="120px">
                          <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;">机关服务中心分管领导意见</label>
                          <div class="flex-block">{{fwzxfgldyj}}</div>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="120px">
                          <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;">机关服务中心主要领导意见</label>
                          <div class="flex-block">{{fwzxzyldyj}}</div>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <el-form-item label-width="120px">
                          <label label-width for="reason" slot="label" style="display: inline-block;height: 100px;">机关服务中心经办人办理</label>
                          <div class="flex-block">{{fwzxjbrbl}}</div>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px" label="交付使用时间">
                <el-date-picker
                    :disabled="!bjFlag"
                    v-model="form1 && form1.leadDate"
                    type="date"
                    placeholder="请选择交付使用时间"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row align="center">
          <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width for="remark" slot="label" style="display: inline-block;height: 100px;line-height:100px;"><span class="red-star"></span>办理情况</label>
                <el-input type="textarea" :disabled="!bjFlag1" style="height: 100px" :row="4" v-model="form1 && form1.remark" :maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center">
           <el-col :span="24">
            <el-form-item label-width="199px">
                <label label-width slot="label" style="display: inline-block;height: 100px;line-height:100px;">发起人阅知办结</label>
                <div class="flex-block">{{fqr}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row align="center" v-if="!detailObj.code || detailObj && detailObj.taskName === '发起人'">
          <el-col :span="24" class="btn-group-col noprint">
            <el-form-item>
              <el-select v-model="assignee"
                    class="manager-select"
                    multiple
                    v-if="!detailObj.code || detailObj && detailObj.taskName === '发起人' && detailObj.showSelectType"
                    style="width: 220px !important;margin-right: 10px;"
                    placeholder="请选择部门领导"
                    clearable>
                <el-option v-for="item in optionsUser"
                        :key="item.userId"
                        :label="item.realname"
                        :value="item.username">
                </el-option>
            </el-select>
              <el-button type="primary" icon="el-icon-check" @click="submitForm('ruleForm')">提交</el-button>
              <el-button  icon="el-icon-delete" v-if="!(detailObj && detailObj.status)" @click="close">关闭</el-button>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <el-dialog
        :visible.sync="modalHouse"
        v-if="modalHouse"
        title="可用住房"
        width="1200px"
        top="2vh"
        :close-on-click-modal="false"
        append-to-body>
        <housing :flag="'bill'"></housing>
        <!-- <avue-crud
          ref="crud"
          :option="option"
          v-model="form2"
          :page.sync="page1"
          :table-loading="listLoading"
          :data="list"
          :permission="permissionList1"
          @on-load="getList1"
          @search-change="searchChange1"
          @refresh-change="refreshChange1"
          @size-change="sizeChange1"
          @current-change="currentChange1">
          <template
              slot="areaId"
              slot-scope="scope">
              {{ scope.row.address }}
          </template>
        </avue-crud> -->
    </el-dialog>
    <el-dialog
            :visible.sync="modalHouse1"
            v-if="modalHouse1"
            title="公有住房"
            width="1200px"
            top="2vh"
             @close="close1"
            :close-on-click-modal="false"
            append-to-body>
            <a-table 
                :row-key="'housingId'"
                :columns="columns2"
                :scroll="{ y: 'calc(100vh - 364px)' }"
                :data-source="allmemberList1"
                :row-selection="{selectedRowKeys: selectedRowKeys1, type: 'radio', onChange: selectMembers1,columnTitle:' '}"
                bordered
                :pagination="page2"
                :loading="loading1"
                @change="handleTableChange1">
                 <template slot="housingType" slot-scope="text,record">
                    <span>
                    {{ record.housingTypeName }}
                    </span>
                </template>
                <template slot="structure" slot-scope="text,record">
                    <span>
                    {{ record.strueName }}
                    </span>
                </template>
                <template slot="toward" slot-scope="text,record">
                    <span>
                    {{ record.towaName }}
                    </span>
                </template>
                <template slot="status" slot-scope="text,record">
                    <span>
                    {{ record.statusName }}
                    </span>
                </template>
             </a-table>
            <div class="btn-footer">
                <el-button type="primary" @click="dataSubmit">确 定</el-button>
                <el-button @click="close1">取 消</el-button>
            </div>
        </el-dialog>
    <choose-member v-if="showChose" :labelkey="labelkey" :url1="url1" :url2="url2" :title="title1" :columns1="columns1" :columns="columns" :type="type" :flKey="flKey"></choose-member>
  </div>
</template>

<script type="text/ecmascript-6">
import {getCurrentDate} from '@/util/date'
import {tableOption1} from '@/const/crud/housing/housing'
import {fetchSameList} from '@/api/housing/housingresident'
import {fetchList} from '@/api/housing/housingbed'
import housing from '@/views/housing/housing/index'
import {fetchList as fetchList1} from '@/api/housing/housing'
import { fetchList as fetchList2 } from '@/api/admin/sysposition'
import {mapGetters} from 'vuex'
import { userSelectAll } from "@/api/admin/user";
import {findByvalue} from '@/util/util'
import chooseMember from '@/components/chooseMember'
import eventBus from '@/util/eventBus'
import {startProcess, billSubmit} from '@/api/bill'
import store from '@/store'
import { remote } from "@/api/admin/dict";
export default {
  components: { chooseMember, housing },
  props: ['formObj', 'detailObj', 'form1'],
  data () {
    var validateCard = (rule, value, callback) => {
      let codeTest = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
      if (value === '') {
        callback(new Error('请输入身份证号'));
      } else if (!codeTest.test(value)) {
        callback(new Error('请输入正确的身份证号'));
      } else {
        callback();
      }
    };
    return {
      date: getCurrentDate(),
      printObj: {
        id: "printForm",//打印区域 Dom ID
        popTitle: '打印页面标题文字',
        ignoreClass: 'noprint',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printForm { height: auto !important; } <style>'  ,//  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      assignee: [],
      fileList: [],
      hrefUrl: '/templet/公有住房 承诺书（在职干部、职工）.docx',
      hrefUrl1: '/templet/公有住房 承诺书 ( 劳务派遣员工）.docx',
      hrefUrl2: '/templet/公有住房 承诺书（挂职借调人员）.docx',
      optionsUser: [],
      ruleForm: {
        sysType: '',
        residentUserId: '',
        residentRealname: '',
        residentType: '',
        residentDeptName: '',
        residentPhone: '',
        residentSex: '',
        residentPost: '',
        spouseName: '',
        spouseCard: '',
        residentPostRank: '',
        residentCard: '',
        fiveArea: '',
        reason: '',
        marriage: '',
        expireDate: '',
      },
      flKey: '',
      url1: '',
      url2: '',
      type:'',
      columns:[],
      columns1:[],
      title1: '',
      bmldsp: '',
      rscsp: '',
      zczyj: '',
      fwzxfgldyj: '',
      fwzxzyldyj: '',
      fqr: '',
      fwzxjbrbl:'',
      labelkey: '',
      showChose: false,
      // form1: {},
      form2: {},
      bjFlag: false,
      bjFlag1: false,
      option: tableOption1,
      page1: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false// 是否倒序
      },
      page2: {
          total: 0, // 总页数
          current: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false// 是否倒序
      },
      permissionList1:{
          delBtn: false,
          addBtn: false,
          editBtn: false
      },
      loading1: false,
      selectedRowKeys1: [],
      allmemberList1: [],
      chosememberList1: [],
      columns2: [
          {
          "title": "地址",
          "dataIndex": "address",
          "key": "address",
          width: 300,
          },	  {
          "title": "房号",
          "dataIndex": "roomNumber",
          "key": "roomNumber",
          },	  {
          "title": "房屋类型",
          "dataIndex": "housingType",
          "key": "housingType",
          scopedSlots: { customRender: 'housingType' },
          },	  {
          "title": "室内结构",
          "dataIndex": "structure",
          scopedSlots: { customRender: 'structure' },
          "key": "structure",
          },	  {
          "title": "朝向",
          "dataIndex": "toward",
          scopedSlots: { customRender: 'toward' },
          "key": "toward",
          },	  {
          "title": "建筑面积",
          "dataIndex": "constructionArea",
          "key": "constructionArea",
          },	  {
          "title": "使用面积",
          "dataIndex": "usageArea",
          "key": "usageArea",
          },	  {
          "title": "使用状态",
          "dataIndex": "status",
          scopedSlots: { customRender: 'status' },
          "key": "status"
      }  ],
      listLoading: true,
      list: [],
      modalHouse: false,
      modalHouse1: false,
      rules: {
        residentRealname: [
          { required: true, message: '居住人不能为空' }
        ],
        residentType: [
          { required: true, message: '请选择人员类别' }
        ],
        residentDeptName: [
          { required: true, message: '工作部门不能为空' }
        ],
        residentPhone: [
          { required: true, message: '请输入联系电话' }
        ],
        residentSex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        residentPost: [
          { required: true, message: '职务不能为空' }
        ],
        marriage: [
          { required: true, message: '婚姻情况不能为空', trigger: 'change' },
        ],
        // spouseCard: [
        //   { required: true, message: '配偶身份证号不能为空' },
        //   { validator: validateCard, trigger: 'blur' }
        // ],
        residentCard: [
          { required: true, message: '身份证号不能为空' },
          { validator: validateCard, trigger: 'blur' }
        ],
        // fiveArea: [
        //   { required: true, message: '请选择是否广州市五区' }
        // ],
        reason: [
          { required: true, message: '请填写申请原因' }
        ],
        // expireDate: [
        //   { required: true, message: '请输入居住期限' }
        // ],
      },
      rules2: {
        residentRealname: [
          { required: true, message: '居住人不能为空' }
        ],
        residentType: [
          { required: true, message: '请选择人员类别' }
        ],
        residentDeptName: [
          { required: true, message: '工作部门不能为空' }
        ],
        residentPhone: [
          { required: true, message: '请输入联系电话' }
        ],
        residentSex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        residentPost: [
          { required: true, message: '职务不能为空' }
        ],
        marriage: [
          { required: true, message: '婚姻情况不能为空', trigger: 'change' },
        ],
        // spouseName: [
        //   { required: true, message: '配偶姓名不能为空' },
        // ],
        // spouseCard: [
        //   { required: true, message: '配偶身份证号不能为空' },
        //   { validator: validateCard, trigger: 'blur' }
        // ],
        residentCard: [
          { required: true, message: '身份证号不能为空' },
          { validator: validateCard, trigger: 'blur' }
        ],
        // fiveArea: [
        //   { required: true, message: '请选择是否广州市五区' }
        // ],
        reason: [
          { required: true, message: '请填写申请原因' }
        ],
        // expireDate: [
        //   { required: true, message: '请输入居住期限' }
        // ],
      },
      rules1: {
        residentRealname: [
          { required: true, message: '居住人不能为空' }
        ],
        residentType: [
          { required: true, message: '请选择人员类别' }
        ],
        residentDeptName: [
          { required: true, message: '工作部门不能为空' }
        ],
        residentPhone: [
          { required: true, message: '请输入联系电话' }
        ],
        residentSex: [
          { required: true, message: '性别不能为空', trigger: 'change' }
        ],
        residentPost: [
          { required: true, message: '职务不能为空' }
        ],
        spouseName: [
          { required: true, message: '配偶姓名不能为空' },
        ],
        spouseCard: [
          { required: true, message: '配偶身份证号不能为空' },
          { validator: validateCard, trigger: 'blur' }
        ],
        marriage: [
          { required: true, message: '婚姻情况不能为空', trigger: 'change' },
        ],
        residentCard: [
          { required: true, message: '身份证号不能为空' },
          { validator: validateCard, trigger: 'blur' }
        ],
        // fiveArea: [
        //   { required: true, message: '请选择是否广州市五区' }
        // ],
        reason: [
          { required: true, message: '请填写申请原因' }
        ],
        // expireDate: [
        //   { required: true, message: '请输入居住期限' }
        // ],
      },
      optionRylb:[],
      optionsJb: [],
      optionsZw: [],
      optionsHyzk: [],
      optionsBed: [],
      optionsHouse: [],
      optionStru: [],
      optionsTowa: [],
      optionsStatus: [],
      optionsHouseType: []
    }
  },
  computed: {
      ...mapGetters(['userInfo']),
      headers() {
          return {
              Authorization: "Bearer " + store.getters.access_token
          }
      },
  },
  created() {
    userSelectAll('ROLE_DEPT_LEADER', this.userInfo.username).then(res => {
      this.optionsUser = res.data.data
    })
    if (this.detailObj && this.detailObj.status) {
      this.ruleForm = this.detailObj
      if(this.detailObj.attachment && this.detailObj.attachment.length > 0) {
        this.detailObj.attachment.map(item => {
          this.fileList.push({
            name: item.original,
            url: item.url
          })
        })
      }
      let keyword
      this.detailObj.commitList.map(citem => {
        if(citem.taskStatus === '1') {
          if (citem.taskName === '部门领导意见') {
            keyword = 'bmldsp'
          } else if (citem.taskName === '人事处审批') {
            keyword = 'rscsp'
          } else if (citem.taskName === '机关服务中心资产组意见') {
            keyword = 'zczyj'
          } else if (citem.taskName === '机关服务中心分管领导意见') {
            keyword = 'fwzxfgldyj'
          } else if (citem.taskName === '机关服务中心主要领导意见') {
            keyword = 'fwzxzyldyj'
          } else if (citem.taskName === '机关服务中心经办人办理') {
            keyword = 'fwzxjbrbl'
          } else if (citem.taskName === '发起人阅知办结') {
            keyword = 'fqr'
          } else {
            keyword = 'bj'
          }
          this[keyword] = '【' + citem.deptName + '-' + citem.realname + '】:' + (citem.message ? citem.message : '') + '。（' + citem.endTime + '）'
        }
      })
      // 办结节点
      if (this.detailObj.canTodo && this.detailObj.taskConfig && this.detailObj.taskConfig.properties) {
        if(this.detailObj.taskName == '机关服务中心经办人办理') {
          this.bjFlag1 = true
        }
        if (this.detailObj.taskName == '机关服务中心资产组意见') {
          this.bjFlag = true
        }
      }
      //办结结束
      if(this.detailObj.status === '2') {
        this.form1 = Object.assign(this.form1, this.detailObj)
      }
    }
    this.init()
    this.eventBusHandle()
  },
  methods: {
    changeMar(value) {
      if(value == '1') {
        this.$refs.ruleForm.clearValidate()
        this.rules2 = Object.assign({}, this.rules1)
      } else {
        this.$refs.ruleForm.clearValidate()
        this.rules2 = Object.assign({}, this.rules)
      }
    },
    choseHouse() {
      if (this.bjFlag) {
        this.getmemberList(this.page2)
        this.modalHouse1 = true
      }
    },
    clearName(value) {
      if(!value) {
        this.ruleForm.sysType = ''
        this.changesysType(1)
      }
    },
    download(file) {
        window.open(file.url)
    },
    handleSuccess(response, file, fileList) {
        let att = []
        if (fileList.length) {
            fileList.map(item => {
                att.push({
                    original: item.response.data.original,
                    url: item.response.data.url,
                })
            })
            this.ruleForm.attachment = JSON.stringify(att)
        } else {
            this.ruleForm.attachment = ''
        }
    },
    handleRemove(file, fileList) {
        let att = []
        if (fileList.length) {
            fileList.map(item => {
                att.push({
                    original: item.response.data.original,
                    url: item.response.data.url,
                })
            })
            this.ruleForm.attachment = JSON.stringify(att)
        } else {
            this.ruleForm.attachment = ''
        }
    },
    changesysType(value) {
      if (value == '1') {
        this.ruleForm.residentName = ''
        this.ruleForm.residentUserId = ''
        this.ruleForm.residentRealname = ''
        this.ruleForm.residentDeptId = ''
        this.ruleForm.residentDeptName = ''
        this.ruleForm.residentPhone = ''
        this.ruleForm.residentSex = ''
        this.ruleForm.residentPost = ''
        this.ruleForm.residentPostRank = ''
        this.ruleForm.residentCard = ''
      }
    },
    changeBed(value) {
      let list = this.optionsBed.filter(item => {
        return item.bedId === value
      })
      if (list.length > 0) {
        let att = Object.assign({}, list[0])
        delete att.leadDate
        delete att.remark
        this.form1 = Object.assign(this.form1, att)
      }
    },
    selectMembers1(selectedRowKeys, selectedRows) {
        this.selectedRowKeys1 = selectedRowKeys
        this.chosememberList1 = selectedRows
    },
    handleTableChange1(pagination, filters, sorter) {
        this.page2.current = pagination.current
        this.getmemberList(this.page2)
    },
    dataSubmit() {
      if (this.chosememberList1.length > 0 ){
          this.form1.bedNumber = ''
          let att = Object.assign({}, this.chosememberList1[0])
          delete att.leadDate
          delete att.remark
          this.form1 = Object.assign(this.form1, att)
          if(this.form1.housingType === '2') {
            fetchList({
              current: 1,
              size: 1000,
              housingId: this.form1.housingId,
              status: '0'}).then(response => {
                this.optionsBed = response.data.data.records
            })
          }
      }
      this.close1()
    },
    close() {
      this.$emit('getItemModal', false)
    },
    close1() {
        this.selectedRowKeys1 = []
        this.chosememberList1 = []
        this.modalHouse1 = false
    },
    printer() {
      this.$emit('printForm')
    },
    showHouse() {
      this.modalHouse = true
    },
    init() {
      remote('personnel_type').then(response => {
        this.optionRylb = response.data.data
      })
      remote('post_level').then(response => {
        this.optionsJb = response.data.data
      })
      remote('marriage_status').then(response => {
        this.optionsHyzk = response.data.data
      })
      remote('housing_structure').then(response => {
          this.optionStru = response.data.data
      })
      remote('housing_toward').then(response => {
          this.optionsTowa = response.data.data
      })
      remote('housing_use_status').then(response => {
          this.optionsStatus = response.data.data
      })
      remote('housing_type').then(response => {
        this.optionsHouseType = response.data.data
      })
      fetchList2({current: 1, size:1000}).then(response => {
          this.optionsZw = response.data.data.records
      })
    },
    changePost(value) {
      // let list = this.optionsZw.filter(item => {
      //   return item.id === value
      // })[0]
      // this.ruleForm.residentPostRank = list.name
    },
    getmemberList(page, params) {
        fetchList1(Object.assign({
            current: page.current,
            size: page.pageSize,
            status: '0'
        }, params)).then(response => {
            response.data.data.records.map(item => {
                item.housingTypeName = findByvalue(this.optionsHouseType, item.housingType)
                item.strueName = findByvalue(this.optionStru, item.structure)
                item.towaName = findByvalue(this.optionsTowa, item.toward)
                item.statusName = findByvalue(this.optionsStatus, item.status)
            })
            this.allmemberList1 = response.data.data.records
            this.page2.total = response.data.data.total
        })
    },
    submitForm(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(_this.ruleForm.marriage == '1') {
            if (!_this.ruleForm.spouseName) {
              this.$message.error('请填写配偶姓名')
              return
            }
            if (!_this.ruleForm.spouseCard) {
              this.$message.error('请填写配偶身份证号')
              return
            }
          }
          if (!_this.detailObj.code || _this.detailObj && _this.detailObj.taskName === '发起人' && _this.detailObj.showSelectType) {
             if(!_this.assignee || _this.assignee.length === 0) {
              this.$message.error('请选择部门领导')
              return
            } else {
              _this.formObj.assignee = _this.assignee.join()
            }
          }
          if (_this.formObj.taskName === '发起人') {
            let params = { 
              'billId': _this.formObj.billId,
              'comment': '',
              'flag': '提交',
              'taskId': _this.formObj.taskId
            }
            params.bizData = _this.ruleForm
            params.assignee = _this.formObj.assignee
            billSubmit(params).then(response => {
              this.$message.success('处理成功')
              this.$router.go(-1)
            })
          } else {
            this.$confirm('确定提交?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              _this.ruleForm.applyDate = _this.date
              _this.formObj.bizData = _this.ruleForm
              startProcess(_this.formObj).then(response => {
                this.$message.success('提交成功')
                this.close()
              })
            })
          }
        }
      });
    },
    eventBusHandle () {
        let _this = this
        eventBus.$on('getMember', function (data) {
          _this.ruleForm.residentName = data['house'][0].username
          _this.ruleForm.residentUserId = data['house'][0].userId
          _this.ruleForm.residentRealname = data['house'][0].realname
          _this.ruleForm.residentDeptId = data['house'][0].deptId
          _this.ruleForm.residentDeptName = data['house'][0].deptName
          _this.ruleForm.residentPhone = data['house'][0].phone
          _this.ruleForm.residentSex = data['house'][0].sex
          _this.ruleForm.residentPost = data['house'][0].post
          _this.ruleForm.residentPostRank = data['house'][0].level
          _this.ruleForm.residentCard = data['house'][0].cardId
          _this.ruleForm.sysType = '1'
        })
    },
    choseMember () {
      // if (this.ruleForm.sysType === '1') {
        this.type = "radio"
        this.labelkey = 'house_choose_member'
        this.url1 = '/admin/dept/tree'
        this.url2 = '/admin/user/page/simple'
        this.title1 = '组织机构'
        this.flKey = 'deptId'
        this.columns = [
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '姓名',
            key: 'realname',
            dataIndex: 'realname',
        },
        {
            title: '所属部门',
            dataIndex: 'deptId',
            key:'deptId',
            scopedSlots: { customRender: 'deptId' },
        },
        {
            title: '岗位',
            dataIndex: 'post',
            key: 'post',
            scopedSlots: { customRender: 'post' },
        }
        ]
        this.columns1 = [
        {
            title: '姓名',
            dataIndex: 'realname',
            key: 'realname' 
        },
        // {
        //     title: '操作',
        //     key: 'action',
        //     scopedSlots: { customRender: 'action' },
        // },
        ]
        this.showChose = true
      // }
    },
    getList1(page, params) {
        this.listLoading = true
        fetchList1(Object.assign({
            current: page.currentPage,
            size: page.pageSize
        }, params, this.searchForm1)).then(response => {
            let getTable = []
            response.data.data.records.map((item, index) => {
                if (item.bedList && item.bedList.length > 0) {
                    item.bedList.map((citem, i) => {
                        const obj = Object.assign({}, item)
                        obj.bedNumber = citem.bedNumber
                        obj.sharingArea1 = citem.sharingArea
                        obj.roomArea1 = citem.roomArea
                        obj.rentArea1 = citem.rentArea
                        obj.defaultRent1 = citem.defaultRent
                        obj.status1 = citem.status
                        obj.index = index + 1
                        if (i === 0) {
                            obj.typeIndex = item.bedList.length
                        }
                        getTable.push(obj)
                    })
                } else {
                    item.status1 = item.status
                    item.index = index + 1
                    item.typeIndex = 1
                    getTable.push(item)
                }
            })
            this.list = getTable
            this.page1.total = response.data.data.total
            this.listLoading = false
        })
    },
    searchChange1(param, done) {
        this.searchForm1 = param
        this.page1.currentPage = 1
        this.getList1(this.page1, param)
        done()
    },
    sizeChange1(pageSize) {
        this.page1.pageSize = pageSize
    },
    currentChange1(current) {
        this.page1.currentPage = current
    },
    refreshChange1() {
        this.getList1(this.page1)
    },
  }
}
</script>
<style lang="scss">
.btn-group-col{
  .el-form-item__content{
    text-align: center;
  }
}
.render-form .jb-form-item .el-form-item__content .el-form-item__error{
  right: 155px;
}
.render-form .xm-form-item .el-form-item__content .el-form-item__error{
  right: 75px;
}
.render-form .xb-form-item .el-form-item__content .el-form-item__error{
  right: 15px;
}
.xm-form-item{
  .el-radio{
    margin-right: 10px;
  }
}
.flex-block{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form{
  position: relative;
  .disable-block{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 400px;
    z-index: 1;
    cursor: not-allowed;
  }
}
.btn-footer{
    text-align: center;
}
.url-block1{
  text-decoration: underline;
  color: #333;
  &:hover{
    text-decoration: underline;
  }
}

.upload-detail .el-upload-list__item .el-icon-close{
  display: none;
}
</style>

